<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" href="images/icons/favicon.ico" />
		<link href="style.less" rel="stylesheet/less" type="text/css" />
		<script src="jquery.js" type="text/javascript"></script>
		<script src="functions.js" type="text/javascript"></script>
		<script src="less.js" type="text/javascript"></script>
		<title>Puzzled</title>
	</head>
	<body>
		<input type="hidden" id="autoFocus" value="" />
		<div onclick="clearMsgs()" id="msgs">
			<c:forEach items="${msgs.fetchAll()}" var="msg">
				<p class="<c:out value="${msg.findClass()}" />">
					<c:out value="${msg.getMsg()}" />
				</p>
			</c:forEach>
	 	</div>
		<div id="container">
			<div id="header">
				<div id="userstatus">
					<c:choose>
						<c:when test="${user==null}">
							You are not logged in, please 
							<a href="/Puzzled/Puzzled?todo=login">login</a> 
							or 
							<a href="/Puzzled/Puzzled?todo=register">register</a>
						</c:when>
						<c:otherwise>
							Welcome, <c:out value="${user.getUserName()}" />
							[<img title="Puzzle Points!" class="pp" src="images/icons/pp.png" /> <c:out value="${user.getPoints()}" />] | 
							<a href="/Puzzled/Puzzled?todo=logout">logout</a>
						</c:otherwise>
					</c:choose>
				</div>
				<img title="Home" onclick="window.location='/Puzzled/Puzzled?todo=index'" src="images/logo.png" />
				<br />
				<button onclick="window.location='/Puzzled/Puzzled?todo=scores'">High Scores!</button>
			</div>
			<div id="content">
				<div id="puzzle">
					<c:forEach begin="1" end="9" step="1" var="y">
						<div class="row">
							<c:forEach begin="1" end="9" step="1" var="x">
								<c:choose>
									<c:when test="${y==1 && x==1}">
										<div class="cell top left">
									</c:when>
									<c:when test="${(y==1 && x==9) || ((x==3 || x==6 || x==9) && y==1)}">
										<div class="cell top right">
									</c:when>
									<c:when test="${(y==3 || y==6 || y==9) && x==1}">
										<div class="cell bottom left">
									</c:when>
									<c:when test="${y==1}">
										<div class="cell top">
									</c:when>
									<c:when test="${x==1}">
										<div class="cell left">
									</c:when>
									<c:when test="${(y==3 || y==6 || y==9) && (x==3 || x==6 || x==9)}">
										<div class="cell bottom right">
									</c:when>
									<c:when test="${y==3 || y==6 || y==9}">
										<div class="cell bottom">
									</c:when>
									<c:when test="${x==3 || x==6 || x==9}">
										<div class="cell right">
									</c:when>
									<c:otherwise>
										<div class="cell">
									</c:otherwise>
								</c:choose>
									<c:if test="${puzzle != null}">
										<c:choose>
											<c:when test="${puzzle.isUserInput(x-1,y-1)}">
												<c:choose>
													<c:when test="${solved}">
														<c:choose>
															<c:when test="${puzzle.isCorrect(x-1,y-1)}">
																<div class="green">
																	<c:out value="${puzzle.getCell(x-1,y-1) }" />
																</div>
															</c:when>
															<c:otherwise>
																<div class="red">
																	<c:out value="${puzzle.getCell(x-1,y-1) }" />
																</div>
															</c:otherwise>
														</c:choose>
													</c:when>
													<c:otherwise>
														<c:choose>
															<c:when test="${puzzle.isHint(x-1,y-1)}">
																<div class="yellow">
																	<c:out value="${puzzle.getCell(x-1,y-1) }" />
																</div>
															</c:when>
															<c:otherwise>
																<form class="userInput" method="post" action="/Puzzled/Puzzled">
																	<input type="hidden" name="todo" value="select" />
																	<input type="hidden" name="x" value="<c:out value="${x-1}" />" />
																	<input type="hidden" name="y" value="<c:out value="${y-1}" />" />
																	<c:out value="${puzzle.getCell(x-1,y-1) }" />											
																</form>
															</c:otherwise>
														</c:choose>
													</c:otherwise>
												</c:choose>
											</c:when>
											<c:when test="${puzzle.isHint(x-1,y-1)}">
												<div class="yellow">
													<c:out value="${puzzle.getCell(x-1,y-1) }" />
												</div>
											</c:when>
											<c:otherwise>
												<c:out value="${puzzle.getCell(x-1,y-1) }" />
											</c:otherwise>
										</c:choose>
									</c:if>
								</div>
							</c:forEach>
						</div>
						<div class="clear"></div>
					</c:forEach>
				</div>
				<c:if test="${!solved}">
					<form method="post" action="/Puzzled/Puzzled">
						<input type="hidden" name="todo" value="hint" />
						<input type="submit" value="Hint!" />
					</form>
					<form method="post" action="/Puzzled/Puzzled">
						<input type="hidden" name="todo" value="solve" />
						<input type="submit" value="Solve!" />
					</form>
				</c:if>
				<c:if test="${solved}">
					<div style="text-align:center">
						You got <c:out value="${puzzle.numCorrect()}" />/<c:out value="${puzzle.numUserInput()}" /> correct
					</div>
				</c:if>
			</div>
			<div id="footer">
				Copyright &copy; 2011-2012 AwesomeInc
			</div>
		</div>
	</body>
</html>